<template>
	<view class="integral-detail">
		<view class="integgral-title">
			<text class="integgral-num">{{userIntegral}}</text>
			<text class="integgral-name">积分</text>
		</view>

		<view class="line"></view>

		<view class="input-output-box">
			<view class="tab-box">
				<view class="tab-item" :class="{'active': tabIndex == 0}" @click.stop="toggleTabIndex(0)">积分收入</view>
				<view class="tab-item" :class="{'active': tabIndex == 1}" @click.stop="toggleTabIndex(1)">积分支出</view>
			</view>

			<view class="tab-content" v-if="tabIndex == 0">
				<view class="content-item" v-for="(item, index) in integralIncomeList" :key="index">
					<view class="content-item-left">
						<view class="item-left-top">{{item.creditsContent}}</view>
						<view class="item-left-btm">时间：{{item.createTime}}</view>
					</view>
					<view class="content-item-right">+{{item.creditsValue}}</view>
				</view>
			</view>
			<uni-load-more :status="incomeMore" :content-text="contentText" @clickLoadMore="handleIncomeLoadMore"
				v-if="tabIndex == 0" />

			<view class="tab-content" v-else>
				<view class="content-item" v-for="(item, index) in integralOutputList" :key="index">
					<view class="content-item-left">
						<view class="item-left-top">{{item.creditsContent}}</view>
						<view class="item-left-btm">时间：{{item.createTime}}</view>
					</view>
					<view class="content-item-right">{{item.creditsValue}}</view>
				</view>
			</view>
			<uni-load-more :status="outputMore" :content-text="contentText" @clickLoadMore="handleOutputLoadMore"
				v-if="tabIndex == 1" />
		</view>

		<view class="height"></view>
	</view>
</template>

<script>
	import apiRqs from '@/api/api-request.js';
	export default {
		data() {
			return {
				tabIndex: 0,
				userIntegral: 0,
				integralIncomeList: [],
				integralOutputList: [],
				incomeRqsData: {
					"pageSize": 10,
					"pageIndex": 1,
					"orderBy": "asc"
				},
				outputRqsData: {
					"pageSize": 10,
					"pageIndex": 1,
					"orderBy": "asc"
				},
				incomeMore: "more",
				outputMore: "more",
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
			}
		},
		onLoad() {
			this.getUserIntegral();
			this.getIntegralIncomeDetail();
			this.getIntegralOutputDetail();
		},
		methods: {
			toggleTabIndex(index) {
				this.tabIndex = index;
			},
			// 获取个人积分
			getUserIntegral() {
				apiRqs._getUserIntegral().then((res) => {
					console.log('个人积分', res);
					if (res.code == 200) {
						this.userIntegral = res.data;
					} else {
						getApp().showToast(res.msg);
					}
				})
			},

			// 获取积分收入情况
			getIntegralIncomeDetail() {
				getApp().showLoading();
				apiRqs._getIntegralIncome(this.incomeRqsData).then((res) => {
					uni.hideLoading();
					console.log('积分收入情况', res);
					if (res.code == 200) {
						let newData = JSON.parse(JSON.stringify(res.data.data));
						if (newData.length < this.incomeRqsData.pageSize) {
							this.incomeMore = 'nomore';
						} else {
							this.incomeMore = 'more';
						}
						this.integralIncomeList = newData;
					} else {
						getApp().showToast(res.msg);
					}
				})
			},

			// 获取积分支出情况
			getIntegralOutputDetail() {
				apiRqs._getIntegralOutput(this.outputRqsData).then((res) => {
					console.log('积分支出情况', res);
					if (res.code == 200) {
						let newData = JSON.parse(JSON.stringify(res.data.data));
						if (newData.length < this.outputRqsData.pageSize) {
							this.outputMore = 'nomore';
						} else {
							this.outputMore = 'more';
						}
						this.integralOutputList = newData;
					} else {
						getApp().showToast(res.msg);
					}
				})
			},

			// 积分收入加载更多
			handleIncomeLoadMore(e) {
				if (e.detail.status != "nomore") {
					this.incomeRqsData.pageSize = this.incomeRqsData.pageSize + 10;
					this.getIntegralIncomeDetail();
				}
			},

			// 积分支出加载更多
			handleOutputLoadMore(e) {
				if (e.detail.status != "nomore") {
					this.outputRqsData.pageSize = this.outputRqsData.pageSize + 10;
					this.getIntegralOutputDetail();
				}
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.integral-detail {
		.integgral-title {
			margin: 20px 20px 10px 20px;
			display: flex;
			align-items: center;

			.integgral-num {
				font-size: 30px;
				color: #008aff;
				font-weight: 500;
			}

			.integgral-name {
				font-size: 14px;
				color: #008aff;
				margin-left: 8px;
			}
		}

		.line {
			width: calc(100% - 40px);
			margin: 0 20px;
			height: 1px;
			background-color: rgba(0, 0, 0, 0.05);
		}

		.input-output-box {
			margin: 0 20px;

			.tab-box {
				display: flex;
				align-items: center;
				margin: 20px;

				.tab-item {
					font-size: 14px;
					color: rgba(0, 0, 0, 0.7);
					flex: 1;
					min-width: 0;
					text-align: center;

					&.active {
						color: #008aff;
						font-weight: 500;
					}
				}
			}

			.tab-content {
				background-color: #fff;
				border-radius: 4px;

				.content-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 0px 20px;
					padding: 20px 0;
					border-bottom: 1px solid rgba(0, 0, 0, 0.05);

					&:last-child {
						border-bottom: none;
					}

					.content-item-left {
						.item-left-top {
							font-size: 16px;
							color: rgba(0, 0, 0, 0.9);
							font-weight: 500;
						}

						.item-left-btm {
							font-size: 12px;
							color: rgba(0, 0, 0, 0.5);
							margin-top: 10px;
						}
					}

					.content-item-right {
						font-size: 16px;
						color: #008aff;
						font-weight: 500;
						margin-left: 10px;
					}
				}

				.uni-load-more {
					margin-top: 20px;
				}
			}
		}

		.height {
			height: 20px;
		}
	}
</style>
